<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-19 15:58
  PageName：b_practice2_Button.html
  Function：实战案例 - 设计精致按钮
  URL：http://localhost:8080/f_image/f5_practice/b_practice2_Button.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计精致按钮</title>

    <style type="text/css">
        body {
            background: #ededed;
            margin: 30px auto;
            color: #999;
        }

        /* 定义渐变按钮样式类 */
        .button {
            display: inline-block;
            /*zoom 和 *display 属性都为了兼容ie7，使其具有display:inlineblock特性*/
            zoom: 1;
            *display: inline;
            vertical-align: baseline;
            margin: 0 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            /* 设计按钮圆角、盒子阴影和文本阴影特效 */
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        }

        .button:hover {
            text-decoration: none;
        }

        .button:active {
            position: relative;
            top: 1px;
        }

        /* 定义大圆角样式类 */
        .bigrounded {
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
        }

        /* 定义大按钮样式类 */
        .medium {
            font-size: 12px;
            padding: .4em 1.5em .42em;
        }

        /* 定义小按钮样式类 */
        .small {
            font-size: 11px;
            padding: .2em 1em .275em;
        }

        /* 设计颜色样式类: 黑色风格的按钮 */
        /* 通过设计不同颜色样式类，可以设计不同风格的按钮效果 */
        .black { /* 黑色样式类 */
            color: #d7d7d7;
            border: solid 1px #333;
            background: #333;
            background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
            background: -moz-linear-gradient(top, #666, #000);
            background: linear-gradient(to bottom, #666, #000);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
        }

        /* 黑色鼠标经过样式类 */
        .black:hover {
            background: #000;
            background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
            background: -moz-linear-gradient(top, #444, #000);
            background: linear-gradient(to bottom, #444, #000);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
        }

        /* 黑色鼠标激活样式类 */
        .black:active {
            color: #666;
            background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
            background: -moz-linear-gradient(top, #000, #444);
            background: linear-gradient(to bottom, #000, #444);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
        }
    </style>
</head>

<body>
<div>
    <a href="#" class="button black">圆角按钮</a>
    <a href="#" class="button black bigrounded">大号椭圆按钮</a>
    <a href="#" class="button black medium">中号按钮</a>
    <a href="#" class="button black small">小号按钮</a> <br/>
</div>
</body>
</html>